<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckBox</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="inbox">
        <div class="item">
            <input type="checkbox" />
            <p>a</p>
        </div>
        <div class="item">
            <input type="checkbox" />
            <p>b</p>
        </div>
        <div class="item">
            <input type="checkbox" />
            <p>c</p>
        </div>
        <div class="item">
            <input type="checkbox" />
            <p>d</p>
        </div>
        <div class="item">
            <input type="checkbox" />
            <p>e</p>
        </div>
    </div>
    <script>
        let boxs = document.querySelectorAll(`input[type='checkbox']`)
        let lastChecked
        let onOff = false
        let boxArr = Array.from(boxs)

        function handleClick(e) {
            //console.log(e.shiftKey, this)
            if (!lastChecked) lastChecked = this;
            if (e.shiftKey) {
                let start = boxArr.indexOf(this);
                let end = boxArr.indexOf(lastChecked);
                boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                    .forEach(input => input.checked = lastChecked.checked)
            }
            lastChecked = this

        }
        boxs.forEach(checkbox => {
            checkbox.addEventListener('click', handleClick)
        })
    </script>
</body>

</html>